import React from 'react'
// import { CSSTransition } from 'react-transition-group'
import 'bootstrap/dist/css/bootstrap.css'
import '@/static/scss/animation.css'

//TodoListItem
import TodoListItem from './TodolistItem'
export default class todoList extends React.Component {
	constructor() {
		super()
		this.state = {
			todoList: [
				{
					id: '123123123',
					content: '吃饭',
					isEnd: false
				}
			]
		}
		this.input = null
	}
	//添加todo
	addTodoList() {
		let content = this.input.value
		//判断并添加
		content &&
			this.state.todoList.push({
				id: new Date().getTime(),
				content: content,
				isEnd: false
			})
		//更新数据
		this.setState({
			todoList: this.state.todoList
		})
		//清空
		this.input.value = ''
	}
	//结束todo
	endTodoItem(i) {
		this.state.todoList[i].isEnd = !this.state.todoList[i].isEnd
		this.setState({
			todoList: this.state.todoList
		})
	}
	render() {
		return (
			<div className='todo-container container'>
				<br />
				<div className='input-group mb-3'>
					<input
						type='text'
						className='form-control'
						placeholder='todo content'
						ref={(element) => (this.input = element)}
					/>
					<div className='input-group-append'>
						<button
							className='btn btn-outline-secondary'
							type='button'
							id='button-addon2'
							onClick={this.addTodoList.bind(this)}
						>
							TODO
						</button>
					</div>
				</div>
				<ul className='list-group list-group-flush'>
					{this.state.todoList.map((item, index) => (
						<TodoListItem
							key={index}
							itemData={item}
							index={index}
							endTodoItem={this.endTodoItem.bind(this)}
						/>
					))}
				</ul>
			</div>
		)
	}
	componentDidMount() {
		console.log(this.input)
	}
}
